<template>
  <div class="light-control-container">
    <div class="light-control" style="flex: 0 0 calc(33.333% - 10px); margin: 5px;">
      <h3 style="font-size: 12px; margin-bottom: 4px;">无土栽培架</h3>
      <button 
        class="round-btn" 
        @click="toggleSoilDevice(1)" 
        style="width: 45px; height: 45px; border-radius: 50%; font-size: 12px;"
        :style="getButtonStyle(1)"
      >
        {{ getButtonText(1) }}
      </button>
      <div class="light-status" style="font-size: 10px;">状态: {{ getStatusText(1) }}</div>
    </div>
    
    <div class="light-control" style="flex: 0 0 calc(33.333% - 10px); margin: 5px;">
      <h3 style="font-size: 12px; margin-bottom: 4px;">电磁阀A</h3>
      <button 
        class="round-btn" 
        @click="toggleSoilDevice(2)" 
        style="width: 45px; height: 45px; border-radius: 50%; font-size: 12px;"
        :style="getButtonStyle(2)"
      >
        {{ getButtonText(2) }}
      </button>
      <div class="light-status" style="font-size: 10px;">状态: {{ getStatusText(2) }}</div>
    </div>
    
    <div class="light-control" style="flex: 0 0 calc(33.333% - 10px); margin: 5px;">
      <h3 style="font-size: 12px; margin-bottom: 4px;">电磁阀B</h3>
      <button 
        class="round-btn" 
        @click="toggleSoilDevice(3)" 
        style="width: 45px; height: 45px; border-radius: 50%; font-size: 12px;"
        :style="getButtonStyle(3)"
      >
        {{ getButtonText(3) }}
      </button>
      <div class="light-status" style="font-size: 10px;">状态: {{ getStatusText(3) }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue'

// 栽培架设备状态数组（无土栽培架、电磁阀A、电磁阀B）
const soilDeviceStatus = ref([0, 0, 0]) // 0: 关闭, 1: 打开

// 切换栽培架设备状态
const toggleSoilDevice = (deviceIndex: number) => {
  soilDeviceStatus.value[deviceIndex - 1] = soilDeviceStatus.value[deviceIndex - 1] === 0 ? 1 : 0
}

// 获取按钮文本
const getButtonText = (deviceIndex: number) => {
  return soilDeviceStatus.value[deviceIndex - 1] === 1 ? '关闭' : '打开'
}

// 获取状态文本
const getStatusText = (deviceIndex: number) => {
  return soilDeviceStatus.value[deviceIndex - 1] === 1 ? '打开' : '关闭'
}

// 获取按钮样式
const getButtonStyle = (deviceIndex: number) => {
  if (soilDeviceStatus.value[deviceIndex - 1] === 1) {
    // 打开状态，使用亮色（类似于灯光亮的颜色）
    return {
      background: 'linear-gradient(145deg, #00ff00, #00cc00)'
    }
  } else {
    // 关闭状态，使用暗色或灰色
    return {
      background: 'linear-gradient(145deg, #666666, #444444)'
    }
  }
}
</script>

<style scoped>
.light-control-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 10px;
}

.light-control {
  text-align: center;
  margin: 10px;
  flex: 0 0 calc(33.333% - 20px);
}

.light-control h3 {
  color: #0ff;
  margin-bottom: 8px;
  font-size: 12px;
}

.light-control .round-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: linear-gradient(145deg, #666666, #444444);
  color: white;
  border: none;
  font-size: 12px;
  cursor: pointer;
  margin-bottom: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.light-control .round-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.light-control .round-btn:active {
  transform: scale(0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.light-control .round-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 70%);
  transform: rotate(30deg);
  transition: all 0.3s ease;
}

.light-control .round-btn:hover::after {
  transform: rotate(30deg) translate(20%, 20%);
}

.light-status {
  color: #fff;
  font-size: 10px;
}
</style>
